<template>
  <el-card>
    <template #header>订单编辑</template>
    <el-form
      :model="orderForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="收货人" prop="consignee">
        <el-input v-model="orderForm.consignee"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="orderForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="送货地址" prop="deliverAddress">
        <el-input v-model="orderForm.deliverAddress"></el-input>
      </el-form-item>
      <el-form-item label="订单金额" prop="orderAmount">
        <el-input v-model="orderForm.orderAmount"></el-input>
      </el-form-item>
      <el-form-item label="订单状态" prop="orderState">
        <el-input v-model="orderForm.orderState"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="orderForm.remarks"></el-input>
      </el-form-item>
      <el-form-item label="订单号" prop="orderNo">
        <el-input v-model="orderForm.orderNo"></el-input>
      </el-form-item>
      <el-form-item label="下单时间" prop="orderTime">
        <el-date-picker
          v-model="orderForm.orderTime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
        <!-- <el-input v-model="orderForm.orderTime"></el-input> -->
      </el-form-item>
      <el-form-item label="送达时间" prop="deliveryTime">
        <el-date-picker
          v-model="orderForm.deliveryTime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
        <!-- <el-input v-model="orderForm.deliveryTime"></el-input> -->
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { detailOrders, EditOrders } from '../../api/orders'
export default {
  data() {
    return {
      orderForm: {
        consignee: '',
        phone: '',
        deliverAddress: '',
        orderAmount: '',
        orderState: '',
        remarks: '',
        orderNo: '',
        orderTime: '',
        deliveryTime: ''
      },
      rules: {
        consignee: [
          { required: true, message: '请输入您的名字', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        deliverAddress: [
          { required: true, message: '请输入送货地址', trigger: 'blur' }
        ],
        orderAmount: [
          { required: true, message: '请输入订单金额', trigger: 'blur' }
        ],
        orderState: [
          { required: true, message: '请输入订单状态', trigger: 'blur' }
        ],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        orderNo: [{ required: true, message: '请输入订单号', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getOrders()
  },
  methods: {
    async getOrders() {
      const { data } = await detailOrders({
        id: Number(this.$route.params.id)
      })
      console.log(data)
      this.orderForm = data
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { code, msg } = await EditOrders(this.orderForm)
          // console.log(data)
          if (code === 0) {
            this.$message.success(msg)
            setTimeout(() => {
              this.$router.push('/order')
            }, 1500)
          } else {
            this.$message.error(msg)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped></style>
